---
title: Instala Astro con el CLI automático
description: >-
  Cómo instalar Astro con NPM, PNPM, o Yarn a través de create-astro con el CLI
  de Astro.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::note[¿Prefieres instalar Astro manualmente?]
Lee nuestra [guía de instalación manual paso a paso](/es/install/manual/) en su lugar.
:::

#### Prerrequisitos

- **Node.js** - `v18.14.1` o mayor.
- **Editor de código** - Recomendamos [VS Code](https://code.visualstudio.com/) con nuestra [extensión oficial de Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro es usado a través de la interfaz de línea de comandos (CLI).

#### Instalación

`create astro` es la forma más rápida y fácil de comenzar un nuevo proyecto en Astro. Serás guiado paso a paso para configurar tu nuevo proyecto de Astro. Podrás elegir entre algunas plantillas de inicio oficiales o puedes [usar cualquier proyecto existente en GitHub con el argumento `--template`](#plantillas-de-inicio).

:::tip[Previsualizaciones en línea]
¿Prefieres probar Astro en tu navegador? Visita [astro.new](https://astro.new/) para ver nuestras plantillas y crear un proyecto de Astro solamente usando tu navegador.
:::

## 1. Ejecuta el Asistente de Configuración

Ejecuta el siguiente comando en tu terminal para iniciar el asistente de instalación:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # crea un nuevo proyecto con npm
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # crea un nuevo proyecto con pnpm
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # crea un nuevo proyecto con yarn
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

Puedes ejecutar `create astro` en cualquier carpeta de tu computadora, así que no es necesario crear un directorio vacío antes de inicializar tu proyecto. Si aún no tienes un directorio designado para tu nuevo proyecto, el asistente creará uno por ti.

Si todo ha salido bien, deberías ver un mensaje "Liftoff confirmed. Explore your project!" seguido de algunas recomendaciones de próximos pasos, "Next steps". Entra en el nuevo directorio de tu proyecto usando `cd` y empieza a utilizar Astro.

Si has omitido el paso de `npm install` durante el asistente CLI, asegúrate de instalar las dependencias antes de continuar.

## 2. Inicia Astro ✨

Astro posee un servidor de desarrollo que tiene todo lo que necesitas para desarrollar tu proyecto. El comando `astro dev` iniciará el servidor de desarrollo local para que veas tu nuevo proyecto en acción por primera vez.

Cada plantilla de inicio posee un script preconfigurado que ejecutará `astro dev` por ti. Utiliza tu gestor de paquetes favorito para ejecutar este comando e iniciar el servidor de desarrollo de Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

¡Si todo marcha bien, Astro deberá servir tu proyecto localmente en [http://localhost:4321](http://localhost:4321)!

Astro escuchará cualquier cambio en la carpeta `src/` y actualizará automáticamente tu proyecto. De esta forma, no será necesario reiniciar el servidor local durante el desarrollo.

Cuando visualices tu sitio en el navegador, tendrás acceso a la [barra de herramientas de desarrollo de Astro](/es/guides/dev-toolbar/). A medida que construyas, te ayudará a inspeccionar tus [islas](/es/concepts/islands/), detectar problemas de accesibilidad y mucho más.

Si no es posible abrir el proyecto en el navegador, regresa a la terminal donde has ejecutado el comando `dev` y chequea si ha ocurrido algún error o si tu proyecto está siendo servido en una URL diferente a la mencionada anteriormente.

## Plantillas de Inicio

Puedes empezar un nuevo proyecto de Astro basado en un [ejemplo oficial](https://github.com/withastro/astro/tree/main/examples) o en la rama `main` de cualquier repositorio de GitHub pasando un argumento `--template` al comando `create astro`.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # crea un nuevo proyecto a partir de un ejemplo oficial
  npm create astro@latest -- --template <example-name>

  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # crea un nuevo proyecto a partir de un ejemplo oficial
  pnpm create astro@latest --template <example-name>
  
  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # crea un nuevo proyecto a partir de un ejemplo oficial
  yarn create astro --template <example-name>
  
  # crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

Por defecto, este comando utilizará la rama `main` del repositorio de plantilla. Para utilizar una rama diferente, pásala como parte del argumento `--template`: `<github-username>/<github-repo>#<branch>`.

Explora nuestros [temas y proyectos de inicio](https://astro.build/themes/) donde puedes navegar por temas para blogs, portafolios, documentación, páginas de inicio y más. ¡O, [busca en GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories) para más proyectos de inicio!

## Siguientes pasos

¡Felicidades! ¡Estás listo para empezar a desarrollar con Astro! 🥳

Estos son algunos temas que recomendamos explorar luego. Puedes leerlos en el orden que más te guste. También puedes dejar la documentación a un lado e ir a jugar un poco con el código de tu nuevo proyecto Astro y volver cuando tengas algún problema o alguna duda.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="Entiende tu base de código"
    description="Aprende más sobre la estructura de archivos de Astro en nuestra Guía de Estructura del Proyecto."
    href="/es/basics/project-structure/"
  />
  <LinkCard
    title="Añade un framework"
    description="Aprende cómo extender Astro con soporte para React, Svelte, Tailwind y más, usando npx astro add en nuestra Guía de integraciones"
    href="/es/guides/integrations-guide/"
  />
  <LinkCard
    title="Despliega tu sitio"
    description="Aprende cómo construir y desplegar tu proyecto de Astro en la web con nuestra Guía de despliegue."
    href="/es/guides/deploy/"
  />
</CardGrid>
